* {
	margin: 0;
	padding: 0;
}
html,
body,
#root,
.App {
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
}
a {
	text-decoration: none;
}
.App {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.nav {
		width: 100%;
		height: 7vh;
		display: flex;
		position: relative;
		justify-content: space-around;
		align-items: center;
		// z-index: 1;
		background-color: #fff;
		box-shadow: 1px 0 5px 1px #999;
		.active {
			color: deeppink;
		}
		//  定位遮罩层
		.bgc {
			position: absolute;
			left: center;
			top: -10px;
			width: 80px;
			height: 50px;
			background-color: #fff;
			box-shadow: 1px 0 5px 1px #999;
			z-index: -1;
			border-radius: 50%;
		}
		.bgc-mark {
			width: 80px;
			height: 50px;
			position: absolute;
			left: center;
			top: -10px;
			border-radius: 50%;
			background-color: #fff;
		}
		a {
			color: #999;
			font-size: 14px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		button {
			width: 40px;
			height: 40px;
			outline: none;
			border: none;
			background-color: rgb(29, 138, 240);
			border-radius: 50%;
			box-shadow: 0 0 3px 0 #999;
			position: absolute;
			top: 0;
			left: center;
			font-size: 35px;
			color: white;
		}
	}
	.main {
		width: 100%;
		flex: 1;
		overflow: hidden;
		.mainSwiper {
			width: 100%;
			height: 100%;

			.swiper-wrapper {
				width: 100%;
				height: 90%;
				transform: translate3d(0px, 0px, 0px) !important;
				transition-duration: 0ms !important;
				margin-top: 9.3vh;
				.swiper-slide {
					width: 100% !important;
					height: 100%;
					overflow-y: auto;
					visibility: hidden;
					.item {
						width: 100%;
						min-height: 20vh;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						border-top: 1px solid #aaa;
						border-bottom: 1px solid #aaa;
						box-sizing: border-box;
						margin: 1vh 0;
					}
				}
				.swiper-slide-active {
					visibility: inherit;
				}
			}
			.swiper-pagination {
				width: 100%;
				height: 10%;
				top: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: -1px 0 5px 1px #999;
			}
			.swiper-pagination-bullet {
				width: 15% !important;
				height: 100% !important;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 18px;
				// color: #000;
				opacity: 1;
				background: rgba(0, 0, 0, 0);
				border-radius: 0 !important;
			}
			.swiper-pagination-bullet-active {
				// color: #fff;
				// background: #007aff;
				border-bottom: 2px solid #999;
			}
		}
	}

	.users {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px 10px;
		.userHand {
			width: 96%;
			display: flex;
			justify-content: space-between;
			button {
				width: 48px;
				background-color: aqua;
				color: rgb(241, 6, 171);
				font-weight: 600;
				font-size: 18px;
				border: none;
			}
			#searchBox {
				float: left;
				width: 70%;
				height: 30px;
				border-radius: 50px;
			}
		}
		.personage {
			margin-top: 24px;
			display: flex;
			align-items: center;
			img {
				width: 100px;
				height: 100px;
				margin-right: 50px;
			}
		}
		.classify {
			display: flex;
			justify-content: space-evenly;
			flex-direction: row;
			flex-wrap: wrap;
      text-align: center;
      margin-top: 24px;
			span {
				background-color: aqua;
				display: block;
				width: 72px;
				height: 72px;
			}
		}
	}
  //登录页面
  .register{
    display: flex;
    flex-direction: column;
    align-items: center;
    img{
      width: 100px;
      margin-top: 20vh;
    }
    input{
      height: 24px;
      margin-top: 10px;
    }
    button{
      margin-top: 20px;
      width: 168px;
      height: 30px;
      border: none;
      background-color: aqua;
      color: rgb(57, 3, 250);
      margin-bottom: 10px;
    }
    
  }
  #link{
    float: right;
    margin-right: 18vw;
    font-size: 14px;
  }
}
